<template>
<div :style="{ padding: '0 0 32px 32px' }">
  <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
  <v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 60, 20]" :scale="scale" :onClick="handleClick">
    <v-tooltip></v-tooltip>
    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid"/>
    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid"/>
    <v-legend dataKey="type" marker="circle" :offset="30"/>
    <v-coord type="polar" radius="0.8"/>
    <v-line :position="position" color="type" :size="2"/>
    <v-point :position="position" color="type" :size="4" shape="circle"/>
  </v-chart>
</div>
</template>

<script>
import { DataSet } from '@antv/data-set'
import { ChartEventMixins } from './mixins/ChartMixins'
export default {
  name: 'Radar',
  mixins: [ChartEventMixins],
  props: {
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 254
    },
    dataSource: {
      type: Array,
      default: () => [
        { item: '示例一', score: 40 },
        { item: '示例二', score: 20 },
        { item: '示例三', score: 67 },
        { item: '示例四', score: 43 },
        { item: '示例五', score: 90 }
      ]
    },
    xField: {
      type: String,
      default: 'item'
    },
    fields: {
      type: Array,
      default: () => []
    },
    // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
    aliases: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      axis1Opts: {
        dataKey: this.xField,
        line: null,
        tickLine: null,
        grid: {
          lineStyle: {
            lineDash: null
          },
          hideFirstLine: false
        }
      },
      axis2Opts: {
        dataKey: 'score',
        line: null,
        tickLine: null,
        grid: {
          type: 'polygon',
          lineStyle: {
            lineDash: null
          }
        }
      },
      scale: [
        {
          dataKey: 'score',
          min: this.min,
          max: this.max
        }, {
          dataKey: 'type',
          alias: '类型'
        }
      ],
      position: this.xField + '*score',
      min: 0,
      max: 100
    }
  },
  computed: {
    data() {
      if (this.fields.length === 0) {
        return this.dataSource
      }
      const dv = new DataSet.View().source(this.dataSource)
      dv.transform({
        type: 'fold',
        fields: this.fields,
        key: 'type',
        value: 'score'
      })
      const that = this
      let min = 0
      let max = 100
      // bar 使用不了 - 和 / 所以替换下
      const rows = dv.rows.map(row => {
        if (typeof row.type === 'string') {
          row.x = row.type.replace(/[-/]/g, '_')
        }
        if (row.score < min) {
          min = row.score
        }
        if (row.score > max) {
          max = row.score
        }
        return row
      })
      // 替换别名
      rows.forEach(row => {
        for (const item of this.aliases) {
          if (item.field === row.type) {
            row.type = item.alias
            break
          }
        }
      })
      that.min = min
      that.max = max
      return rows
    }
  }
}
</script>

<style scoped>

</style>
